<template>
  <div id="app">
    <BaseTable :users="list1">
      <template #default="obj">
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </BaseTable>
    <BaseTable :users="list2">
      <template #default="{row,msg}">
        <button>查看{{ row }}--{{ msg }}</button>
      </template>
    </BaseTable>

    <div class="box" v-loading="isLoading">
      <ul>
        <li v-for="item in list" :key="item.id" class="news">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="info">
              <span>{{ item.source }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="right">
            <img :src="item.img" alt="" />
          </div>
        </li>
      </ul>
    </div>

    <div>
      <h1>自定义指令,全局main.js</h1>
      <input v-focus ref="refInp" type="text" />
      <h1 v-color="color1">指令的值，局部注册指令</h1>
      <h1 v-color="color2">指令的值，局部注册指令</h1>
    </div>
    <div v-if="isShowEdit">
      <input ref="refEdit" type="text" v-model="editValue" />
      <button>确认</button>
    </div>
    <div v-else>
      <h3>{{ title }}</h3>
      <button @click="handleEdit">编辑</button>
    </div>

    <BaseForm ref="refForm"></BaseForm>
    <button @click="handleGetData">获取表单数据</button>
    <button @click="handleResetData">重置表单数据</button>
    <BaseChart></BaseChart>
    <button @click="isShow = true">退出按钮</button>
    <BaseDialog :visible.sync="isShow">
      <template #title>我是标题 </template>
      <template #content>我是内容</template>
    </BaseDialog>
    <BaseProgress :w="w"></BaseProgress>
    <BaseCount :count="count" @changCount="handleChange"></BaseCount>
    <UserInfo
      :username="username"
      :age="age"
      :car="car"
      :isSingle="isSingle"
      :hobby="hobby"
    ></UserInfo>
    <hr />
    <div class="vmode">
      <input type="text" v-model="msg" />
      <input type="text" :value="msg" @input="msg = $event.target.value" />
      <BaseSelect v-model="selectId"></BaseSelect>
      <BaseInput v-model="username"></BaseInput>
    </div>
    <hr />
    <div class="flexdiv">
      <button @click="changeData">修改数据</button>
      <BaseA></BaseA>
      <BaseB></BaseB>
      <BaseC></BaseC>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import UserInfo from "./components/UserInfo.vue";
import BaseProgress from "./components/BaseProgress.vue";
import BaseCount from "./components/BaseCount.vue";
import BaseA from "./components/BaseA.vue";
import BaseB from "./components/BaseB.vue";
import BaseC from "./components/BaseC.vue";
import BaseSelect from "./components/BaseSelect.vue";
import BaseInput from "./components/BaseInput.vue";
import BaseDialog from "./components/BaseDialog.vue";
import BaseChart from "./components/BaseChart.vue";
import BaseForm from "./components/BaseForm.vue";
import BaseTable from "./components/BaseTable.vue";
export default {
  name: "App",
  directives: {
    color: {
      inserted(el, binding) {
        el.style.color = binding.value;
      },
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
    loading: {
      inserted(el, binding) {
        binding.value
          ? el.classList.add("loading")
          : el.classList.remove("loading");
      },
      update(el, binding) {
        binding.value
          ? el.classList.add("loading")
          : el.classList.remove("loading");
      },
    },
  },
  async created() {
    const res = await axios.get("http://hmajax.itheima.net/api/news");
    setTimeout(() => {
      this.list = res.data.data;
      this.isLoading = false;
    }, 2000);
  },
  components: {
    UserInfo,
    BaseProgress,
    BaseCount,
    BaseA,
    BaseB,
    BaseC,
    BaseSelect,
    BaseInput,
    BaseDialog,
    BaseChart,
    BaseForm,
    BaseTable,
  },
  // mounted() {
  //   this.$refs.refInp.focus()
  // },
  //为子孙后代直接提供数据
  provide() {
    return {
      username: this.username,
      car: this.car,
      hobby: this.hobby,
    };
  },
  data() {
    return {
      list1: [
        { id: 1, name: "张三", age: 18, gender: 1 },
        { id: 2, name: "李四", age: 12, gender: 0 },
        { id: 3, name: "王五", age: 22, gender: 1 },
      ],
      list2: [
        { id: 1, name: "赵六", age: 17, gender: 0 },
        { id: 2, name: "孙七", age: 19, gender: 0 },
        { id: 3, name: "伍佰", age: 33, gender: 1 },
      ],
      list: [],
      isLoading: true,
      color1: "blue",
      color2: "red",
      isShowEdit: false,
      editValue: "大标题",
      title: "大标题",
      isShow: false,
      selectId: "105",
      msg: "v-model原理",
      w: 16,
      count: 36,
      username: "小帅g",
      age: 28,
      isSingle: true,
      car: {
        brand: "宝马",
      },

      hobby: ["篮球", "足球", "游泳"],
    };
  },
  methods: {
    changeTitle(title) {
      this.myTitle = title;
    },
    handleChange(newval) {
      this.count = newval;
    },
    changeData() {
      this.username = "刘金山";
      this.car.brand = "奔驰";
      this.hobby[0] = "乒乓球";
    },
    handleGetData() {
      const fd = this.$refs.refForm.getFormData();
      console.log(fd);
    },
    handleResetData() {
      this.$refs.refForm.resetFormData();
    },
    handleEdit() {
      this.isShowEdit = true;
      console.log(this.$refs.refEdit);
      this.$nextTick(() => {
        this.$refs.refEdit.focus();
      });
    },
    del(id) {
      
      this.list1 = this.list1.filter((item) => item.id!== id);
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-color: skyblue;
  padding: 10px;
}
.flexdiv {
  display: flex;
  justify-content: space-around;
}
.base-chart-box {
  width: 100px;
  height: 100px;
}

.loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./assets/loading.gif") no-repeat center white;
}

.box {
  width: 800px;
  height: 300px;
  border: 3px solid orange;
  border-radius: 5px;
  position: relative;
  margin: 0 auto;

  overflow: hidden;
}
.news {
  display: flex;
  height: 100px;
  width: 700px;
  margin: 0 auto;
  padding: 15px 0;
  cursor: pointer;
}
.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news .left .title {
  font-size: 20px;
}
.news .left .info {
  color: #999999;
}
.news .left .info span {
  margin-right: 20px;
}
.news .right {
  width: 160px;
  height: 100px;
}
.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
